<template>
    <div class="video" ref="video" @scroll="binScroll">
        <div ref="videoContent">
            <div class="videoContent"  v-for="(item,i) in data" :key="i">
            <div class="item" v-if="item.type===1">
                <div class="top">
                    <div class="userImg">
                        <img :src="item.r.a.p" alt="" @click="binuser(item.r.a.id)">
                    </div>
                    <div class="userName">{{item.r.a.n}}</div>
                    <div class="userIv">LV.{{item.r.a.lvl}}</div>
                </div>
                <!-- <div class="videoItem">
                    <video controls :src="item.r.vfurl" style="width:100%; height:100%; object-fit: fill"></video>
                </div> -->
                <div class="imgItem">
                    <img :src="item.r.img" alt="" @click="bint1(item.r.id)">
                </div>
                <div class="bottom">
                    <div class="shouchang" v-if="item.r.collect_count_text!=''">
                        <div class="left">
                            <div :class="'img'+i" v-for="(src,i) in item.r.collect_users" :key="i">
                                <img :src="src.p" alt="">
                            </div>
                        </div>
                        <div class="right">{{item.r.collect_count_text}}</div>
                    </div>
                    <div class="title">{{item.r.n}}</div>
                </div>
            </div>
        </div>
        </div>
        
    </div>
</template>

<script>
    export default {
        name:'Video',
        data() {
            return {
                data:[],
                timer:0
            }
        },
        async created(){
            await this.axios.get('https://apis.netstart.cn/douguo/home/videos/0/10'). then((response) => {
                if (response.data.state=== "success") {
                    this.data = response.data.result.list
                }
            })
        },
        methods:{
            binScroll(){
                let length = this.data.length
                clearTimeout(this.timer)
                this.timer = setTimeout(()=>{
                    if (this.$refs.videoContent.scrollHeight-this.$refs.video.scrollTop===this.$refs.video.clientHeight) {
                        this.axios.get(`https://apis.netstart.cn/douguo/home/videos/${length}/10`). then((response) => {
                        this.data.push(...response.data.result.list) 
                        })
                    }
                },300)
            },
            bint1(id){
                this.$router.push({name:'type1',query:{id}})
            },
            binuser(id){
                this.$router.push({name:'caipu',query:{id}})
            }
        }
    }
</script>

<style lang="less" scoped>
    .video{
        width: 100%;
        height: calc(100vh - 100px);
        overflow: auto;
    }
    .item{
        padding-top: 10px;
        width: 100%;
        .top{
            width: 100%;
            height: 50px;
            display: flex;
            align-items: center;
            .userImg{
                width: 30px;
                height: 30px;
                border-radius: 50%;
                overflow: hidden;
                margin-left: 10px;
            }
            .userName{
                height: 30px;
                line-height: 30px;
                margin-left: 10px;
            }
            .userIv{
                height: 30px;
                line-height: 30px;
                margin-left: 10px;
                color: #fbc959;
            }
        }
        .img{
            width: 100%;
            position: relative;
            .learned_count_text{
                position: absolute;
                color: white;
                padding: 10px;
                bottom: 0;
                left: 0;
            }
        }
        .imgItem{
            width: 100%;
            img{
                width: 100%;
            }
        }
        .bottom{
            padding: 10px;
            .title{
                width: 100%;
                margin-bottom: 10px;
                display: -webkit-box;
                -webkit-line-clamp: 2;
                -webkit-box-orient: vertical;
                overflow: hidden;
            }
            .biaoqian{
                span{
                    color: #50969F;
                    font-weight: 800;
                    margin-right: 10px;
                }
            }
            .shouchang{
                margin-bottom: 10px;
                display: flex;
                .left{
                    display: flex;
                    margin-right: 10px;
                    .img0{
                        width: 20px;
                        height: 20px;
                        border-radius: 50%;
                        overflow: hidden;
                    }
                    .img1{
                        width: 20px;
                        height: 20px;
                        border-radius: 50%;
                        overflow: hidden;
                    }
                    .img2{
                        width: 20px;
                        height: 20px;
                        border-radius: 50%;
                        overflow: hidden;
                    }
                    .img3{
                        width: 20px;
                        height: 20px;
                        border-radius: 50%;
                        overflow: hidden;
                    }
                }
            }
        }
    }
</style>